<template>
  <div>
    <div class="box-border p-12px">
      <el-form ref="formRef" class="mt-12px">
        <div>
          <el-card shadow="never">
            <el-tabs v-model="tabName" class="demo-tabs">
              <el-tab-pane name="配置信息" label="配置信息">
                <el-table :data="assetDeadLineWarn" style="width: 100%">
                  <el-table-column label="序号" type="index" width="80px" />
                  <el-table-column label="提醒时间（距离变更时间更长）">
                    <template #default="scope">
                      <el-form-item>
                        <el-input-number v-model="scope.row.num" :min="0" class="w-40%" />
                        <el-select v-model="scope.row.unit" class="ml-12px !w-50%">
                          <el-option
                            v-for="(item, index) in timeUnit"
                            :key="index"
                            :label="item.label"
                            :value="item.label"
                          />
                        </el-select>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column label="提醒对象">
                    <template #default="scope">
                      <el-select v-model="scope.row.warnObjectType" class="!w-40%">
                        <el-option
                          v-for="(ite, i) in warnObjectEnum"
                          :key="i"
                          :label="ite.label"
                          :value="ite.value"
                        />
                      </el-select>
                      <el-select
                        v-model="scope.row.userIds"
                        clearable
                        multiple
                        filterable
                        class="ml-12px !w-40%"
                        v-if="scope.row.warnObjectType == 4"
                      >
                        <el-option
                          v-for="item in userOptions"
                          :key="parseInt(item.id)"
                          :label="item.username + '（' + item.nickname + '）'"
                          :value="parseInt(item.id)"
                        />
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="200px">
                    <template #default="scope">
                      <el-button
                        :icon="Minus"
                        size="small"
                        circle
                        v-if="scope.$index !== 0"
                        class="ml-12px"
                        @click="delRow(scope.$index)"
                      />
                      <el-button
                        :icon="Plus"
                        size="small"
                        circle
                        class="ml-12px"
                        v-if="assetDeadLineWarn.length === scope.$index + 1"
                        @click="addRow(scope.$index)"
                      />
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </div>
      </el-form>
    </div>
    <div>
      <el-button type="primary" @click="confirm">确定</el-button>
      <el-button @click="closeOutDrawer">取消</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { Plus, Minus, Close } from '@element-plus/icons-vue'
import { strategyCreate, strategyUpdate } from '@/api/strategyManage/strategy/index'
import { algorithmPage } from '@/api/strategyManage/algorithm/index'
import SubTitle from '@/components/SubTitle/index.vue'
import * as UserApi from '@/api/system/user'

const message = useMessage() // 消息弹窗
const props = defineProps({
  params: {
    default: () => {}
  },
  closeOutDrawer: Function
})

const tabName = ref('配置信息')

const assetDeadLineWarn = ref([
  {
    num: '1',
    unit: '1',
    warnObjectType: '1',
    userIds: ''
  }
])

const timeUnit = [
  {
    label: '年'
  },
  {
    label: '月'
  },
  {
    label: '日'
  }
]
const warnObjectEnum = [
  {
    label: '数据录入用户',
    value: 0
  },
  {
    label: '审核用户',
    value: 1
  },
  {
    label: '最后审核用户',
    value: 2
  },
  {
    label: '管理员用户',
    value: 3
  },
  {
    label: '指定用户',
    value: 4
  },
  {
    label: '最后审核节点用户',
    value: 2
  }
]
const userOptions = ref([]) // 用户列表

const formRef = ref()

const addRow = (rowIndex) => {
  assetDeadLineWarn.value.splice(rowIndex + 1, 0, {
    num: '',
    unit: '',
    warnObjectType: '',
    userIds: ''
  })
}
const delRow = (rowIndex) => {
  assetDeadLineWarn.value.splice(rowIndex, 1)
}

const confirm = async () => {
  props.params.callBack(assetDeadLineWarn.value)
  props.closeOutDrawer()
}

const getUserList = async () => {
  userOptions.value = await UserApi.getSimpleUserList()
}

onMounted(() => {
  getUserList()
  console.log('props.params.objJson', props.params.objJson)
  if (props.params.objJson) {
    assetDeadLineWarn.value = JSON.parse(props.params.objJson)
  }
})
</script>

<style scoped lang="scss">
:deep(.el-table .el-form-item--default) {
  margin-bottom: 0 !important;
}
</style>
